<template>
   <PanelSplitTwo bottomToolbarHeight="0" :num="2">
    <template #top>
      <SetUserSelect
        class="queryForm"
        :formData="orderSelect"
        v-model:queryParams="paginationParams"
        @selectFunc="selectFunc"
      ></SetUserSelect>
    </template>
     <template #centerToolbar>
        <div class="vex_flex">
          <el-row :gutter="20" style="margin-bottom: 10px">
            <el-col :span="1.5">
              <el-button @click="handleQuery">新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button :disabled="selectedList.length != 1" @click="handleQuery(1)">查看</el-button>
            </el-col>   
            <el-col :span="1.5">
              <el-button :disabled="selectedList.length != 1"  @click="handleExport">导出</el-button>
            </el-col>  
          </el-row>
        <VxeTableGrid
          style="flex: 1;"
          :tableColumn="tableColumn"
          :tableLoading="tableLoading"
          :dataList="dataList"
          :showPagination="true"
          :paginationParams="paginationParams"
          @getList="setQueryParams"
          @selectedChange="selectedChange"
        >
        </VxeTableGrid>
      </div>
      
     </template>
   </PanelSplitTwo>
</template>

<script setup lang="jsx">
import { useRouter } from 'vue-router'
import { finAccountCheckList as initData } from "@/api/statements.js";
import datas from './data.js'
const { paginationParams, orderSelect }  = datas
const { proxy } = getCurrentInstance();
const router= useRouter ()
const { set_statement_status } = proxy.useDict("set_statement_status");
const tableColumn = ref([
  { type: "checkbox", width: 60, fixed: null },
  { field: "agencyName", title: "代理商" },
  { field: "year", title: "年度" },
  { field: "month", title: "月度" },
  { field: "integral", title: "积分"},
  { field: "sendTime", title: "发布时间" },
  { field: "status", title: "状态",
  slots: { default: ({ row }, h) => {
    return [<dict-tag options={ set_statement_status.value } value={ row.status }></dict-tag>]
  }} }
]);
const onlineList = ref([]);
const loading = ref(false);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
let tableLoading = ref(false)
const dataList = ref([
])

const queryParams = ref({
  ipaddr: undefined,
  userName: undefined
});
const selectFunc = () => {
  paginationParams.value.pageNum = 1
  getList()
}
// 切换分页
  function setQueryParams(val) {
    paginationParams.value.pageNum = val.pageNum;
    paginationParams.value.pageSize = val.pageSize;
    getList()
  }
  // 选择表格
  let Id = ref('')
  let selectedList = ref([])
  let status = ref(null)
  function selectedChange(val) {
    Id.value = val.currentItem.id
    status.value = val.currentItem.status
    selectedList.value = val.selectedList
  }
/** 查询登录日志列表 */
function getList() {
  loading.value = true;
  initData(paginationParams.value).then(response => {
    dataList.value = response.rows;
    paginationParams.value.total = response.total;
    loading.value = false;
  });
}
/** 搜索按钮操作 */
function handleQuery(type) {
  pageNum.value = 1;
  router.push({
    path: '/statements/addStatements',
    query: {
      id: type == 1? Id.value : ''
    }
  })
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
/** 强退按钮操作 */
function handleForceLogout(row) {
    proxy.$modal.confirm('是否确认强退名称为"' + row.userName + '"的用户?').then(function () {
  return forceLogout(row.tokenId);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

getList();
const handleExport = () => {
  proxy.download("/task/finAccountCheck/export", {
    ...paginationParams.value
  }, `config_${new Date().getTime()}.xlsx`);
}
</script>
<style scoped>
  .app-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 85px);
    overflow: hidden;
  }
  .vex_flex {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
  }
  .flexmin {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
</style>